<template>
  <el-table border :data="tableData" height="100%" :row-class-name="setRowClassName">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.tKey"
      :prop="header.tKey"
      :label="header.tVal"
      :width="calcWidth(header)"
      align="center"
    >
      <template #header>
        <div>{{ header.tVal }}</div>
      </template>
      <template #default="{ row }">
        <div v-if="editColumn.includes(header.tVal)">
          <div class="water-class" v-if="header.tVal == '洪水起调水位'">
            <el-select
              v-model="row.waterStart"
              placeholder="请选择"
              @change="(val, $event) => handleChangeWaterStart(val, row)"
            >
              <el-option
                v-for="item in state.waterStartData"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
            <el-input class="short-input" v-model="row[header.tKey]" :disabled="false"></el-input>
          </div>
          <div v-else>
            <el-input v-model="row[header.tKey]" />
          </div>
        </div>
        <div v-else>
          {{ row[header.tKey] }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { getResvFLevel } from '@/services/modules/dispatch-manage'
const state = reactive({
  waterStart: 0,
  waterStartData: [
    {
      id: 0,
      label: '当前水位'
    },
    {
      id: 1,
      label: '汛限水位'
    },
    {
      id: 2,
      label: '设计水位'
    },
    {
      id: 3,
      label: '校核水位'
    }
  ]
})
const flag = ref(false)
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  tableHeaders: {
    type: Array,
    default: []
  },
  editColumn: {
    type: Array,
    default: []
  },
  schemeId: {
    type: String,
    default: ''
  }
})
watch(
  () => props.tableHeaders,
  () => {
    if (!flag.value) {
      props.tableData.forEach((item) => {
        item.waterStart = 0
      })
      flag.value = true
    }
  },
  {
    immediate: true
  }
)
function calcWidth(row) {
  let flexWidth = 100
  if (props.tableHeaders.length <= 4) {
    flexWidth = 'auto'
  }
  for (const char of row.tVal) {
    if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
      // 如果是英文字符，为字符分配8个单位宽度
      flexWidth += 8
    } else if (char >= '\u4e00' && char <= '\u9fa5') {
      // 如果是中文字符，为字符分配20个单位宽度
      flexWidth += 20
    } else {
      // 其他种类字符，为字符分配5个单位宽度
      flexWidth += 10
    }
  }
  if (flexWidth < 50) {
    // 设置最小宽度
    flexWidth = 200
  }
  if (flexWidth > 250) {
    // 设置最大宽度
    flexWidth = 250
  }
  return flexWidth + 'px'
}

const getResvFLevelList = (item, row) => {
  getResvFLevel({ levelKey: item, blknm: row.Title, scid: props.schemeId }).then((res) => {
    if (res.code === 200) {
      props.tableData.forEach((item, index) => {
        if (item.Title == row.Title) {
          item['洪水起调水位'] = res.data.levelVl
        }
      })
    }
  })
}
const handleChangeWaterStart = (item, row) => {
  getResvFLevelList(item, row)
}
</script>
<style lang="less" scoped>
.short-input {
  width: 150px;
  margin-left: 10px;
}
.water-class {
  display: flex;
  justify-content: space-between;
}
</style>
